<template>
  <div class="popular-anchor yu-color-text pt-10 pl-2 pb-1 pr-2">
    <span class="border-b-1 block yu-color-text pb-2">热门主播</span>
    <div class="mt-2 ">
      <span v-for="anchor in topSixAnchor" :key="anchor.id" class="flex pb-2 cursor-pointer" @click="jumpAnchor(anchor.id)">
        <span class="w-15 h-15 block ">
          <img class="w-full h-full" :src="anchor.avatarUrl" alt="">
        </span>
        <span class="block yu-bgColor-hover pl-2 flex-1 pt-2 ">
          {{ anchor.nickName }}
        </span>
      </span>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {getDjToplistPopular} from "@/api/anchor/index";
import {useRouter} from "vue-router";
const router = useRouter()
// 前六个主播数据
const topSixAnchor = ref([])
// 获取主播数据
getDjToplistPopular().then(res => {
  const {code, data} = res
  if (Number(code) === 200) {
    topSixAnchor.value = data.list
  }
  // console.log(res)
})
// 跳转到主播详情页面
const jumpAnchor = (id) => {
  router.push({
    path: '/user/home',
    query: {
      id
    }
  })
}
</script>

<style scoped>

</style>
